@import "/app/styles/_variables";
@import "/app/styles/_mixins";


.user-info-head {
  background-image: -moz-linear-gradient( 90deg, rgb(71,58,149) 0%, rgb(149,82,189) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(71,58,149) 0%, rgb(149,82,189) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(71,58,149) 0%, rgb(149,82,189) 100%);
  width: 100%;
  height: 135px;
  padding: 14px 14px 36px;
  @include display-flex;
  .user-avatar {
    @include flex(0 0 65px);
    padding: 10px 0;
    img {
      display: block;
      width: 65px;
      height: 65px;
      border-radius: 50%;
    }
  }
  .user-desc {
    @include flex(1);
    padding: 10px 25px;
    color: color(white);
  }
}

.user-info-content {
  @include absolute(110px,10px,50px,10px);
  background: color(white);
  border-radius: 5px;
  @include box-shadow(0px 0px 8px 0px rgba(0,0,0,0.12));
  padding: 25px 15px 15px;

  .segmented-control {
    width: 180px;
    margin: 0 auto 14px;
  }

  .user-info-table {
    width: 100%;
    background: $background-color-default;
    th, td {
      padding: 5px 5px;
      line-height: 25px;
      text-align: center;
      font-weight: normal;
    }
    tr:nth-child(odd) {
      background: #e6e6e6;
    }
  }
}